<template>
    <div class="app">
        <!-- 头部区域，包含标题和背景图片 -->  
        <div class="head">  
            <!-- "带" 字标题，设置字体大小和上边距 -->  
            <p class="txt-b txt-c" style="font-size: 70px;margin-top: 50px;">带</p>  
            <!-- 左侧背景图片 -->  
            <img class="head-bg-l" src="../static/info/bg-pets-l.png" alt="">  
            <!-- "我" 字标题，设置字体大小、颜色和上边距 -->  
            <p class="txt-b txt-c" style="font-size: 70px;color: #51b177;margin-top: 150px;">我</p>  
            <!-- 主要背景图片 -->  
            <img class="head-bg" src="../static/info/bg-pets.png" alt="">  
            <!-- "回" 字标题，设置字体大小、颜色和上边距 -->  
            <p class="txt-b txt-c" style="font-size: 70px;color: #92c496;margin-top: 50px;">回</p>  
            <!-- 右侧背景图片 -->  
            <img class="head-bg-l" src="../static/info/bg-pets-r.png" alt="">  
            <!-- "家" 字标题，设置字体大小、颜色和上边距 -->  
            <p class="txt-b txt-c" style="font-size: 70px;color: #a7d6a6;margin-top: 150px;">家</p>  
        </div>  
        
        <!-- 主体区域，包含左右两侧内容 -->  
        <div class="body">  
            <!-- 左侧区域，展示动物图片 -->  
            <div class="body-l">  
                <!-- 使用 Vue 的绑定语法动态获取动物图片 URL -->  
                <img class="body-l-img" :src="myStore.pet_info.img" alt="Image">  
            </div>  
            <!-- 右侧区域，展示动物信息和操作按钮 -->  
            <div class="body-r">  
                <!-- 上方图片区域，展示躺赢猪图片 -->  
                <div class="up-img">  
                    <img class="up-img-p" src="../static/info/躺赢猪.png" alt="">  
                </div>  
                <!-- 动物信息区域 -->  
                <div class="pet-info">  
                    <div class="pets">  
                        <!-- 动物名字和年龄信息 -->  
                        <div class="txt-in">  
                            名字：<div class="pet-info-t"> {{ myStore.pet_info.name }}</div>  
                            年龄：<div class="pet-info-t"> {{ myStore.pet_info.age }}</div>  
                        </div>  
                        <!-- 动物性别和种类信息 -->  
                        <div class="txt-in">  
                            性别:<div class="pet-info-t"> {{ myStore.pet_info.gender }}</div>  
                            种类:<div class="pet-info-t"> {{ myStore.pet_info.type }}</div>  
                        </div>  
                        <!-- "带我回家吧" 按钮，点击后触发 submit 方法 -->  
                        <el-button class="btn" type="primary" @click="submit">带我回家吧</el-button>  
                    </div>  
                </div>  
            </div>  
        </div>
        <div>
            <el-drawer v-model="drawer" title="" :with-header="false" direction="btt" style="height: 800px;" size="600px">
                <div class="txt_b">
                    <span class="t-title" style="font-size: 30px;"><center>流浪宠物领养用户须知</center></span><br>
                        欢迎来到我们的流浪宠物领养平台！为了确保您和宠物的权益，我们特此制定以下用户须知。请您仔细阅读并遵守以下规定：
                    <p class="txt-s">一、领养流程</p>
                        在我们的平台上浏览并选择您喜欢的宠物。
                        确认您选择的宠物是否还有可领养名额。
                        提交领养申请，包括您的联系方式、家庭环境介绍、养宠经验等信息。
                        我们将对您的领养申请进行审核，确保您符合领养条件。
                        审核通过后，我们将与您联系，安排领养事宜。
                    <p class="txt-s">二、领养条件</p>
                        具备稳定的家庭环境，能够为宠物提供良好的生活环境和照顾。
                        了解并接受领养宠物的品种、性别、年龄、健康状况等信息。
                        同意定期为宠物接种疫苗、进行体检，并承担相应的医疗费用。
                        承诺不遗弃、虐待或转卖宠物，确保宠物的安全和幸福。
                    <p class="txt-s">三、宠物信息与照片</p>
                        平台上展示的宠物照片和信息均由志愿者或合作伙伴提供，我们会尽最大努力核实信息的准确性。
                        若发现宠物照片或信息存在不实之处，请及时联系我们进行核实和处理。
                    <p class="txt-s">四、领养后的责任与义务</p>
                        领养后，您需按照约定为宠物提供良好的生活环境和照顾，确保其健康和幸福。
                        定期带宠物进行体检和疫苗接种，确保其健康状况良好。
                        若因特殊原因无法继续照顾宠物，请及时联系我们，以便我们为宠物寻找新的家庭。
                    <p class="txt-s">五、隐私保护与信息安全</p>
                        我们尊重并保护您的个人信息，不会向第三方出售或泄露您的个人信息。
                        若发现任何信息安全漏洞或异常行为，请及时联系我们，我们将尽快采取措施保障您的信息安全。
                    <p class="txt-s">六、免责声明与争议解决</p>
                        对于因不可抗力因素（如自然灾害、政策变化等）导致的平台服务中断或暂停，我们不承担任何责任。
                        若在使用过程中遇到任何争议或纠纷，首先通过平台提供的纠纷解决机制进行协商。如无法达成一致，可向相关监管部门投诉或通过法律途径解决。
                        本须知最终解释权归我们所有。若发现任何违规行为或违反本须知规定，我们将有权暂停或终止相关用户的使用权限。
                        再次感谢您选择我们的流浪宠物领养平台！希望您能够为流浪宠物带来温暖的家，并与我们一起努力，为更多的流浪宠物找到幸福的归宿！
                    <p>七、地址声明</p>
                        本平台只提供宠物查看与预约功能，预约后请尽快到店领养宠物。<br>
                        地址：贵州省黔西南布依族苗族自治州兴义市桔山区兴义大道梦乐城<br>
                        电话：12345678901
                        <br>
                    <el-button type="primary" @click="cot" style="width: 400px;height: 40px;margin-left: 37%;background-color: #03a408;">同意并继续</el-button>
                </div>
            </el-drawer>
        </div>
        <div>
            <BotNavict />
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import { useRoute,useRouter } from "vue-router";
import BotNavict from "./ButtomNavict.vue"
import axios from "axios"
import { useStore } from "@/stores/counter";
import { ElMessage } from "element-plus";


const myStore = useStore();
const route = useRoute();
const router = useRouter();
const drawer = ref(false)


function base64ToBlobUrl(base64String, mimeType = "application/octet-stream") {
  // 将 Base64 字符串解码为二进制数据
  const binaryData = Uint8Array.from(atob(base64String), c => c.charCodeAt(0));

  // 创建 Blob 对象
  const blob = new Blob([binaryData], { type: mimeType });

  // 通过 URL.createObjectURL 创建 Blob 的 URL
  const blobUrl = URL.createObjectURL(blob);

  return blobUrl;
}

function convertBase64ToBlobUrls(obj) {
  // 检查对象是否包含 img 字段
  if (obj && obj.img) {
    // 将 Base64 字符串转换为 Blob URL
    const blobUrl = base64ToBlobUrl(obj.img);
    
    // 返回新对象，img 字段替换为 Blob URL
    return { ...obj, img: blobUrl };
  } else {
    // 对于没有 img 字段的对象，保持不变
    return obj;
  }
}

// 定义触发操作的方法，在组件挂载后执行
const fetchData = async (url) => {
  try {
    // 发起请求
    const response = await axios.get(url)
    console.log(response.data.pet_info)
    // 更新数据到 Pinia Store
    myStore.setPet(convertBase64ToBlobUrls(response.data.pet_info[0]))
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

// 在组件挂载后执行 fetchData 方法
onMounted(() => {
  fetchData('http://localhost:8000/pet/pet_info?pet_id='+route.query.id)
})


function submit(){
    drawer.value = true
}

function cot(){
    const storedData = sessionStorage.getItem('token');
    const t = JSON.parse(storedData)
    if(t !== null){
        axios.post("http://localhost:8000/pet/pet_id",{
            name:t.username,
            pet_id:route.query.id,
        },{
            headers:{
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' 
            }
        }).then(res=>{
            if(res.data.code === '200'){
                ElMessage({
                    message:res.data.infos,
                    type:"success"
                })
                router.push({path:"/"})
            }else{
                ElMessage({
                    message:res.data.infos,
                    type:"error"
                })
            }
        })
        if(drawer.value){
            drawer.value = false
        }
    }else{
        ElMessage({
            message:"你看起来还未登录，请登录",
            type:"error"
        })
    }
}

</script>

<style scoped>
    .txt_b{
        width: 98%;
        height: auto;
        color: black;
        font-size: 18px;
    }
    .t-title{
        width: 100%;
        height: auto;
        color: black;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .up-img{
        width: 100%;
        height: auto;
        background-color: rgba(#fef8ea,0);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .up-img-p{
        width: 400px;
        height: 300px;
        margin:0 auto;
        margin-top: -26px;
        z-index: 2;
    }

    .app{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top:0;
    }
    .body{
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
    .body-l{
        width: 30%;
        height: auto;
    }
    .body-l-img{
        width: 450px;
        height: 600px;
        border-radius: 8px;
    }
    .body-r{
        width: 60%;
        height: 600px;
        /* background-color: #03a408; */
    }
    .pet-info{
        width: 900px;
        height: 400px;
        display: flex;
        position: absolute;
        top: 81%;
        left: 51%;
        transform: translate(-20%,-20%);
        justify-content: space-evenly;
        background-color: #edf3d1;
        border-radius: 8px;
        z-index: 1;
    }
    .txt-in{
        width: 800px;
        height: 100px;
        display: flex;
        justify-content: space-around;
        color: black;    
    }
    .btn{
        width: 300px;
        height: 50px;
        background-color: #03a408;
        margin-left: 25%;
        margin-top: 5%;
    }
    .pet-info-t{
        width: 200px;
        height: 70px;
        text-align: left;
        color: #03a408;
        font-size: 24px;
        font-weight: bold;
        margin-top: -8px;
    }
    .pets{
        margin-top: 80px;
    }
    .txt-b{
        margin-top:200px;
    }
    .head{
       width: auto;
       margin:0 auto;
       display: flex;
       justify-content: space-evenly;
       background-color: #edf3d1;
    }
    .head-bg-l{
        width: 300px;
        height:300px;
    }
    .head-bg{
        width: 30%;
        height: 300px;
    }
    .txt-c{
        font: 96px "微软雅黑";/*设置字体和字体大小*/
        font-weight: 500; /*设置字体粗细*/
        text-align: center; /*设置文字居中*/
        -webkit-animation:swing 2s infinite;/*设置动画*/
        background:-webkit-linear-gradient(top, orange, #03a408);
        -webkit-background-clip: text;/*背景被裁剪到文字*/
        -webkit-text-fill-color: transparent;/*设置文字的填充颜色*/;
    }
    @-webkit-keyframes swing{/*创建动画*/
        20%{
            -webkit-transform:rotate(15deg);
        }40%{
            -webkit-transform:rotate(-15deg);
        }60%{
            -webkit-transform:rotate(5deg);
        }80%{
            -webkit-transform:rotate(-5deg);
        }100%{
            -webkit-transform:rotate(0deg);
        }
    }
    
</style>